<template>
	<view class="item" v-if="item">
		<view class="box">
			<view class="img">
				<image :src="item.itemImage" mode="widthFix" lazy-load></image>
				<view class="label lefttop">{{item.tagTime}}</view>
				<view v-if="item.explainId!=0" class="icon play cuIcon-playfill"></view>
				<view v-if="item.explainId!=0" class="label bottom_center">商品讲解</view>
			</view>
			<view class="text">
				<view class="title">
					{{item.title}}
				</view>
				<view class="price">
					<span class="discountPrice">￥{{item.discountPrice}}</span>
					<span class="basePrice">￥{{item.price}}</span>
					<span class="icon cuIcon-cartfill"></span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				require: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		// position: relative;
		// width: 50%;
		// /* overflow: hidden; */
		// padding: 10upx;
		// box-sizing: border-box;

		>.box {
			overflow: hidden;
			border: 1upx solid rgba(100, 100, 100, 0.2);
			border-radius: 8rpx;

			.img {
				width: 100%;
				position: relative;

				.label,
				.icon {
					position: absolute;
					color: white;
				}

				.lefttop {
					top: 20upx;
					left: 0upx;
					font-size: 0.7rem;
					background-color: #FF4F7F;
					padding: 5upx 10upx;
					border-radius: 2rem;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
				}

				.icon.play {
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-size: 2rem;
					padding: 10upx;
					background-color: rgba(0, 0, 0, 0.2);
					border-radius: 50%;
				}

				.bottom_center {
					bottom: 20upx;
					left: 50%;
					transform: translateX(-50%);
					border-radius: 2rem;
					background-color: rgba(0, 0, 0, 0.4);
					font-size: 0.7rem;
					opacity: 0.6;
					padding: 0upx 10upx;
				}
			}

			.text {
				padding: 20upx;

				.title {
					display: -webkit-box;
					/* 必须结合弹性盒子模型 */
					-webkit-box-orient: vertical;
					/* 文本排列方向为垂直 */
					-webkit-line-clamp: 2;
					/* 限制显示的行数 */
					overflow: hidden;
					height: 2.5rem;
					margin-bottom: 10upx;
				}

				.price {
					display: flex;
					justify-content: space-between;
					align-items: end;

					.discountPrice {
						font-weight: bold;
					}

					.basePrice {
						text-decoration: line-through;
						color: gray;
						font-weight: 100;
						font-size: 0.7rem;
					}

					.icon {
						color: #FF4F7F;

					}
				}
			}
		}
	}
</style>